<template>
	<view class="reco">
		
		<view class="ey same">
			<text>车牌号</text>
		</view>
		
		<up-input placeholder="请输入车牌号" border="surround" v-model="putvalue"></up-input>
		
		<view class="same">
			<up-button type="primary" text="查询" @click="getwark"></up-button>
		</view>
		
		<view class="box"   v-if="recordlist.length>0">
			<view class="reco_item" v-for="item in recordlist" :key="item.id">
				<view class="left">
					<text>{{item.plateNumber}}</text>
				</view>
				<view class="rig">
					<text>停车车位: {{item.lotId}}</text>
					<text>进入时间: {{item.entryTime}}</text>
					<text>出去时间: {{item.outTime}}</text>
					
					<text>停车费用: {{item.monetary}}元</text>
					<text>停车地点: {{item.parkName}}</text>
				</view>
			</view>
			<uni-pagination title="标题文字" prev-text="上一页" next-text="下一页"  @change="change"  :total="total" current="1"/>
			
		</view>
		
		<view v-show="show">
			<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/car.png" text='暂无停车记录' textSize='16'>
		    </u-empty>
		</view>
		
	</view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import {getrecord,getcardeta} from '../../../api/parkApi.js'
import {stoplist} from '@/mock/park.js'

const recordlist =ref([])	//停车记录
const pageNum= ref(1)       //当前页码
const pageSize=ref(10)       //每页数据条数
const total =ref()         //总条数
const show = ref(false)   //搜索结果
const  putvalue= ref()    //车牌号

//点击下一页
const change=(e)=>{
	pageNum.value=e.current
	getrecorddata()
}


//查询停车记录
const getwark=()=>{
	console.log(putvalue.value);
	
	getrecorddata()
	
	
}

//查询车辆信息
// const getcar=async()=>{
// 	let res=await getcardeta({
// 		header:{
// 		"Authorization":uni.getStorageSync('token')
// 		},
// 		data:{}
// 	})
// 	console.log(res);
// }

//查询停车记录
const getrecorddata=async()=>{
	show.value=false
	let res = await getrecord({
		data:{
		pageNum:pageNum.value,
		pageSize:pageSize.value,
		plateNumber:putvalue.value
		}
	})
    console.log(res);
	if(res.code==200){
	recordlist.value=res.rows
    total.value=res.total
	 if(res.rows.length==0){
		show.value=true
	 }
	}else{
	
	//静态数据
	recordlist.value=stoplist(putvalue.value)
	total.value=stoplist(putvalue.value).length	
	if(total.value==0){
			show.value=true
	}	
	
	}
	
	console.log(recordlist.value);
}
onMounted(()=>{
	
})
</script>

<style lang="scss">
	.reco{
	    background-color:#fff;
		overflow: hidden;
		padding: 0px 8px;
	.ey {
		padding: 0px 4px;
		font-size: 16px;
		font-weight: 700;
	
	}
	
	.same {
		margin: 10px 0px;
	}	
	.reco_item{
		background-color: rgb(224, 238, 248);
		display: flex;
		align-items: center;
		padding: 6px 10px;
		margin-bottom: 6px;
		
	.left{
	   flex: 1;
		
	  text{
		  font-size: 18px;
		  font-weight: 700;
	  }
	}
		
	 .rig{
		
		 display: flex;
		 flex-direction: column;
		 flex: 2;
		 
		 text{
		   line-height: 24px;
		 }
	 }	
	}
		
	}

</style>
